<template>
	<!-- <view class=" gui-flex gui-space-between gui-align-items-center" @tap="open()">
		<input type="text" class="gui-form-input gui-flex1 gui-ellipsis" v-model="val" disabled :placeholder="placeholder" />
		<text class="gui-form-icon gui-icons gui-text-center gui-color-gray">&#xe603;</text>
	</view> -->

	<gui-popup ref="popup" position="bottom">
		<view class="gui-flex gui-column" style="height: 80vh; gui-bg-gray">
			<view class="gui-flex gui-flex1 gui-relative gui-bg-gray">
				<!-- 左侧分类列表 -->
				<scroll-view :scroll-y="true" :show-scrollbar="false" :scroll-with-animation="true"
					:scroll-into-view="leftTo" class="gui-cate-left gui-bg-white gui-dark-bg-level-3 gui-absolute-full">
					<view class="gui-cate-left-item gui-border-box" v-for="(item, index) in mainCate" :key="index"
						:class="[currentCateIndex == item.p_id ? 'gui-cate-left-current' : '']" :id="'cate'+item.p_id">
						<text class="gui-border-l"
							:class="['gui-cate-left-item-title','gui-block', currentCateIndex == item.p_id ? 'gui-cate-left-current' : '']"
							:data-cateid="item.p_id" @tap="changCate">{{item.p_name}}</text>
					</view>
				</scroll-view>
				<!-- 右侧列表 -->
				<scroll-view :scroll-into-view="productListTo" :show-scrollbar="false" :scroll-with-animation="true"
					:scroll-y="true" class="gui-cate-right gui-absolute-full" @scroll="rscroll">
					<!-- 循环展示分类及分类对应的产品列表 -->
					<view :data-parentid="cate.p_id" :id="'productList'+cate.p_id" v-for="(cate, idx) in mainCate"
						:key="idx">
						<!-- 循环展示产品 -->

						<view v-for="(cate1,index2) in cate.children" :key="index2">
							<view class="gui-padding gui-border-b">
								<view class="gui-h6 gui-color-black">{{cate1.p_name}}
								</view>
							</view>
							<view>
								<view class="gui-grid">
									<view @click="click(cate,cate1,item)"
										:class="item.checked?['gui-color-red','gui-border-b']:''" class="gui-grid-item"
										:style="{'flex':'0 0 33.3%'}" v-for="(item, index3) in cate1.peijians"
										:key="index">

										<!-- <gui-image :src="item.p_thumb" :width="56" :height="56" class="gui-ic-image"
										mode="aspectFit"></gui-image>
									<text :class="item.checked?['gui-bold','gui-underline']:''"
										class="gui-text-small">{{item.p_name}}</text> -->

										<view style="width: 150rpx;text-align: center;padding: 20rpx 0;"
											:class="item.checked?['gui-bold','gui-bg-red','gui-color-white']:'gui-bg-white'"
											class="gui-text-small   gui-border-radius gui-ellipsis">{{item.p_name}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>

			<view class="gui-bg-white gui-dark-bg-level-3 gui-padding">
				<button type="default" class="gui-button gui-bg-primary gui-noborder" @tap="comfir"
					style="border-radius:50rpx;">
					<view class="gui-color-white gui-button-text">确定<text class="gui-text-small"
							v-if="checkedCount">(已选{{checkedCount}}个)</text></view>
				</button>
			</view>
		</view>
	</gui-popup>

</template>

<script>
	export default {
		name: "hyb-peijian",

		props: {
			modelValue: {
				type: Array,
				default: () => {
					return [];
				}
			},
		},


		data() {
			return {
				// 全屏加载，当数据请求完毕时关闭
				pageLoading: true,
				// 核心区域高度
				mainHeight: 300,
				// 左侧分类定位
				leftTo: 'cate',
				// 标识切换时左侧点击触发的
				isLeftTap: false,
				// 左侧分类数据
				mainCate: [],
				// 当前分类
				currentCateIndex: 1,
				// 延迟执行防止卡顿
				scrollTimer: null,
				// 产品列表滚动定位
				productListTo: '',
				checkedCount: 0,
				val: "",
				ids: [],
				titles: [],
			};
		},
		created() {
			this.ids = this.modelValue;
			uni.gPost("peijian/type/list", {
				p_parentid: 0
			}).then((types) => {
				this.mainCate = types;
				if (this.ids.length > 0) {
					let checked_count = 0;
					let that = this;
					this.mainCate.forEach((cate) => {
						checked_count = 0;
						// if (cate.checked_count > 0) {
						cate.children.forEach((item) => {
							item.peijians.forEach((item1) => {
								if (that.ids.indexOf(item1.p_id) > -1) {
									// checked_count++;
									item1.checked = true;
									that.titles.push(item1.p_name);
									that.checkedCount++;
								}
							});

						})
						// }
						// cate.checked_count = checked_count;
					})
					this.val = this.titles.toString();
				}

			})
		},

		watch: {
			modelValue(val) {
				this.ids = val;
				this.titles = [];
				let checked_count = 0;
				let that = this;
				this.mainCate.forEach((cate) => {
					checked_count = 0;
					if (cate.checked_count > 0) {
						cate.children.forEach((item) => {
							if (that.ids.indexOf(item.p_id) > -1) {
								checked_count++;
								item.checked = true;
								that.titles.push(item.p_name);
							}
						})
					}
					cate.checked_count = checked_count;
				})
				this.val = this.titles.toString();
			}
		},
		methods: {

			open() {
				this.$refs.popup.open();
			},
			click(cate, cate1, item) {
				// if (!cate.checked_count) cate.checked_count = 0;
				// if (!item.checked && cate.checked_count >= cate.p_children_nums) {
				// 	uni.gJs.msg("最多选择" + cate.p_children_nums + "个");
				// 	return;
				// }
				item.checked = !item.checked;
				if (item.checked) {
					// cate.checked_count += 1;
					this.checkedCount += 1;
				} else {
					// cate.checked_count -= 1;
					this.checkedCount -= 1;
				}

			},
			changCate: function(e) {
				this.isLeftTap = true;
				var cateid = e.currentTarget.dataset.cateid;
				this.currentCateIndex = cateid;
				if (cateid == 1) {
					this.productListTo = 'productList2';
					this.$nextTick(() => {
						this.productListTo = 'productList' + cateid;
					});
				} else {
					this.productListTo = 'productList' + cateid;
				}
				setTimeout(() => {
					this.isLeftTap = false;
				}, 3000)

			},
			rscroll: function(e) {
				if (this.isLeftTap) {
					return;
				}
				if (this.scrollTimer != null) {
					clearTimeout(this.scrollTimer);
				}
				this.scrollTimer = setTimeout(() => {
					this.getIndex();
				}, 100);
			},
			// 动态识别分类激活
			getIndex: function(i) {
				const query = uni.createSelectorQuery()
				query.selectAll('.gui-cate-product-list').boundingClientRect()
				query.selectViewport().scrollOffset()
				query.exec((res) => {
					var products = res[0];
					for (let i = 0; i < products.length; i++) {
						if (products[i].top >= 0) {
							this.currentCateIndex = products[i].dataset.parentid,
								this.leftTo = 'cate' + products[i].dataset.parentid;
							break;
						}
					}
				});
			},

			comfir() {
				this.titles = [];
				this.ids = [];
				let list = [];
				let that = this;
				if (this.checkedCount > 0) {
					this.mainCate.forEach((cate) => {
						cate.children.forEach((item0) => {
							item0.peijians.forEach((item) => {
								if (item.checked) {
									list.push(item);
									that.ids.push(item.p_id);
									that.titles.push(item.p_name);
								}
							});

						})
					})
				}
				this.val = this.titles.toString();
				setTimeout(() => {
					this.$emit('input', this.ids)
					this.$emit('update:modelValue', this.ids);
					this.$emit('change', list);
				})
				this.$refs.popup.close();
			}
		}
	}
</script>

<style>
	.gui-cate-left {
		width: 200rpx;
	}

	.gui-cate-right {
		width: 520rpx;
		left: 210rpx;
	}

	.gui-cate-left-item {
		height: 100rpx;
		padding: 35rpx 0;
		font-size: 26rpx;
	}

	.gui-cate-left-item-title {
		line-height: 32rpx;
		font-size: 28rpx;
		border-left-width: 8rpx;
		text-align: center;
	}

	.gui-cate-left-current {
		border-color: #FF0036 !important;
		background-color: #F6F7F8;
		color: #FF0036;
		font-weight: bold;
	}

	.gui-cate-right-title {
		line-height: 80rpx;
	}

	.gui-cate-product-list {
		margin-bottom: 30rpx;
		margin-right: 25rpx;
	}

	.gui-cate-pimg {
		width: 150rpx;
	}

	.gui-cate-pbody {
		margin-left: 30rpx;
		width: 100rpx;
		flex: 1;
		padding-top: -20rpx;
	}

	.gui-cate-price {
		font-size: 32rpx;
		line-height: 60rpx;
	}

	.gui-grid-item {
		padding: 20rpx 0;
	}

	.gui-ic-image {

		margin-bottom: 10rpx;
	}

	.gui-list-image {
		width: 160rpx;
		height: 160rpx;
	}
</style>
